<template>
  <footer class="footer">
    <span class="todo-count"
      ><strong>{{ leftCount }}</strong
      >剩余</span
    >
    <ul class="filters">
      <li v-for="item in typeArr" :key="item">
        <a
          @click.prevent="changeType(item)"
          :class="{ selected: type === item }"
          :href="`#/${item}`"
          >{{ item }}</a
        >
      </li>
    </ul>
    <button class="clear-completed" v-if="showClear" @click="handleClear">
      清除已完成
    </button>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      // type: "all", // 标记 意思就是记录当前是哪个类型 all  active completed
      typeArr: ["all", "active", "completed"],
    };
  },
  props: {
    list: {
      required: true,
      type: Array,
    },
    type: {
      type: String, // 有兴趣小伙伴 可以尝试用自定义校验 因为对应3个字符串
      required: true,
    },
  },
  computed: {
    // 剩余数量
    leftCount() {
      // 过滤出（filter）未完成的数据 取个长度（.length）
      return this.list.filter((item) => !item.done).length;
    },
    // 显示清空的按钮
    showClear() {
      // （只要有一个）完成就显示按钮 所以用some
      return this.list.some((item) => item.done);
    },
  },
  methods: {
    changeType(type) {
      //   console.log(type);
      // 状态提升后，父组件提供了type数据 所以子组件修改父组件数据 不能直接改
      // 违反单向数据流 - 需要子传父
      // this.type = type;
      this.$emit("changeType", type);
    },
    handleClear() {
      // 子传父可以不用传参数，需要传的业务 根据业务需要传什么就传什么
      this.$emit("clear");
    },
  },
};
</script>

<style>
</style>